<template>
    <div>
      <el-form :inline="true" :model="shop" class="demo-form-inline">
        <el-form-item label="商品名">
          <el-input v-model="shop.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="shop.region" placeholder="--请选择分类--">
            <el-option label="--请选择分类--" value=""></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="shops">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="shopNumber" label="商品编号"></el-table-column>
        <el-table-column label="商品名称">
          <template slot-scope="scope">
            <el-tooltip placement="top">
              <div slot="content"><label>{{scope.row.shopName}}</label></div>
              <el-button>{{scope.row.shopName.substring(0,5)}}....</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="type.name" label="商品类型"></el-table-column>
        <el-table-column prop="shopAddr" label="商品产地"></el-table-column>
        <el-table-column prop="shopUnit" label="商品规格"></el-table-column>
        <el-table-column prop="shopRemark" label="商品描述"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="open_supply_dialog(scope.row.id)">供应该商品</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageno"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!--供应对话框-->
      <el-dialog
        title="供应信息填写"
        :visible.sync="dialogVisible"
        width="35%"
        center>
        <component ref="supply_of_goods_dialog" is="supply_of_goods_dialog"></component>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="supply_true()">提 交</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    import supply_of_goods_dialog from "./supply_of_goods_dialog";
    export default {
        name: "supply_of_goods",
        data(){
          return {
            shop:{
              shopName:""
            },
            shop_add_id:"",
            shops:[],
            pageno: 1,
            pagesize: 5,
            total: 1,
            dialogVisible: false//供应模态框开关状态
          }
        },
        methods:{
          getData(){
            let params= {
              //存入当前用户id
              id:sessionStorage.getItem('id')
            };
            Object.keys(this.shop).forEach(item=>{
              params[item]=this.shop[item];
            })
            //调用异步，根据当前用户，查询供应商目前可以添加到供应商维护商品表的商品
            this.$axios.get("supplierSupplyOfGoods/Can_be_added_to_supplier_list_data.action",{params:params}).
            then((response)=> {   //异步调用成功执行
              //将查询到的数据存入对象数组中
              this.shops=response.data.records;
              this.total=response.data.originalData.length;
            }).catch(function (error) {//异步调用失败执行
              alert(error);
            });
          },
          open_supply_dialog(id){
            //打开对话框
            this.dialogVisible = true;
            this.shop_add_id=id;
            //延迟加载，等待对话框完全加载完成时执行
            this.$nextTick(item=>{
              this.$refs.supply_of_goods_dialog.getObject(id);
            })
          },
          supply_true(){
            //调用对话框组件的提交方法
            this.$refs.supply_of_goods_dialog.submit();
            //关闭模态框
            this.dialogVisible=false;
            //重新刷新页面
            this.getData();
          },
          handleSizeChange(val) {
            //每页范围
            this.pagesize = val;
            this.getData();
          },
          handleCurrentChange(val) {
            //当前页
            this.pageno = val;
            this.getData();
          }
        },
        created() {
          this.getData();
        },
        components:{
          supply_of_goods_dialog
        }
    }
</script>

<style scoped>

</style>
